<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Sample Details</title>
<link href="css/sampledetails.css" type="text/css" rel="stylesheet">

<script type="text/javascript"
	src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript"
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

<script type="text/javascript">

	function Point(longitude, latitude){
		this.latitude = parseFloat(latitude);
		this.longitude = parseFloat(longitude);
	}

	function Sample(name, radioactivity, color, point){
		this.name = name;
		this.radioactivity = radioactivity;
		this.color = color;
		this.point = point;
	}
	
	function follow(){
		  var marker;
		  var dog = true;
		  var noMore = false;

		  var mapMouseMove = google.maps.event.addListener(map, 'mousemove', function(e){
		    if(!noMore){
		      marker = new google.maps.Marker({
		    	  position : e.latLng,
		    	  draggable:true,		    	  
		      });
		      noMore = true;

		      google.maps.event.addListener(marker, 'dragend', function(e){
					$("#latitude").val(e.latLng.lat());
					$("#longitude").val(e.latLng.lng());
			  });

		      // This function deletes the marker when dragged outside map
			  google.maps.event.addListener(marker, 'drag', function(e){
			    if(!map.getBounds().contains(e.latLng)){
		          marker.setMap(null);
		        }
		      });	
			  
			  marker.setMap(map);
		    }
		    
		    if(dog){
		      marker.setPosition(e.latLng);
		    }
		    
		  });
		  
		  var mapMouseUp = google.maps.event.addListener(map, 'mouseup', function(e){
				$("#latitude").val(e.latLng.lat());
				$("#longitude").val(e.latLng.lng());			  
		  });
		  
		  var mapClick = google.maps.event.addListener(map, 'click', function(){
		    dog = false;
		    // 'mousemove' event listener is deleted to save resources
		    google.maps.event.removeListener(mapMouseMove);
		    google.maps.event.removeListener(mapMouseUp);
		    google.maps.event.removeListener(mapClick);
		  });
		}	
	
	
	function initialize() {		
		
		var newyorkLocation = new google.maps.LatLng(40.708, -73.99);
		var mapOptions = {
			streetViewControl : false,
			zoom : 15,
			center : newyorkLocation,
			mapTypeId : google.maps.MapTypeId.ROADMAP
		};

		map = new google.maps.Map(document.getElementById('map'), mapOptions);		
		
		
		$('#samplesubmit').bind('click', function(){
			var point = new Point($("#longitude").val(),$("#latitude").val());
			var sample = new Sample($("#name").val(), $("#radioactivity").val(), $("#color").val(), point);
			
			var request = $.ajax({
				  url: "rest/samples",
				  type: "POST",				  
				  contentType: "application/json; charset=utf-8",
				  data : JSON.stringify(sample),
				  dataType: "json"
				});

			request.done(function(msg) {
			  alert("success");
			});

			request.fail(function(jqXHR, textStatus) {
			  alert( "Request failed: " + textStatus );
			});			
			
		});
	}
	
	
	google.maps.event.addDomListener(window, 'load', initialize);
</script>

</head>
<body>
<h1>Sample details</h1>
<div id="sampledetails">
	<form class="form">
		<ul class="sampledetails-wrapper">
			<li>
				<fieldset>
					<legend>Sample Info</legend>
					<ul>
						<li>
							<label for="name">Name</label>
							<input type="text" name="name" id="name"/>
						</li>					

						<li>
							<label for="radioactivity">Radioactivity</label>
							<input type="text" name="radioactivity" id="radioactivity"/>
						</li>
						
						<li>
							<label for="color">Color</label>
							<input type="text" name="color" id="color"/>
						</li>												
					</ul>
				</fieldset>			
			</li>
			<li>
				<fieldset>
					<legend>Geo Location</legend>
					<ul>
						<li>
							<label for="latitude">Latitude</label>
							<input type="text" name="latitude" id="latitude"/>
						</li>
						<li>
							<label for="longitude">Longitude</label>
							<input type="text" name="longitude" id="longitude"/>
						</li>
						<li>
							<div id="map-wrapper">
								<div>
									<a class="marker" href="javascript:follow()">
          								<img src="http://maps.google.com/mapfiles/marker.png" alt="" title="click me" class="pushpin"/>
        							</a>
								</div>
								<div id="map"></div>
							</div>
						</li>
					</ul>
				</fieldset>
			</li>
			<li>
				<ul>
					<button id="samplesubmit" type="button" class="btn">Add</button>
				</ul>
			</li>
		</ul>
	</form>
</div>
</body>
</html>